<template>
      <div id="ComicDetailsBodyDIV">
          <div id="titleWord">章节列表</div>
          <div id="ChapterListDiv">
              <el-button v-for="(item,index) in ChapterInfo" :key="item.ChapterID"  :class="(index+1)%4==1?'ButtonOne':'ButtonNoOne'" style="width:180px;">{{item.ChapterWord}}</el-button>
          </div>
      </div>
</template>

<script>
export default {
    name : "ComicDetailsBody", 
    data(){
        return{
            ChapterInfo:[],
        }
    },
    created(){
        this.ChapterInfo=[{
            ChapterID:"1",
            ChapterWord:"001话",
            HistoryType:"0"
        },
        {
            ChapterID:"2",
            ChapterWord:"002话",
            HistoryType:"0"
        },
        {
            ChapterID:"3",
            ChapterWord:"003话",
            HistoryType:"1"
        },
        {
            ChapterID:"1",
            ChapterWord:"001话",
            HistoryType:"0"
        },
        {
            ChapterID:"2",
            ChapterWord:"002话",
            HistoryType:"0"
        },
        {
            ChapterID:"3",
            ChapterWord:"003话",
            HistoryType:"1"
        },
        {
            ChapterID:"1",
            ChapterWord:"001话",
            HistoryType:"0"
        },
        {
            ChapterID:"2",
            ChapterWord:"002话",
            HistoryType:"0"
        },
        {
            ChapterID:"3",
            ChapterWord:"003话",
            HistoryType:"1"
        },
        {
            ChapterID:"1",
            ChapterWord:"001话",
            HistoryType:"0"
        },
        {
            ChapterID:"2",
            ChapterWord:"002话",
            HistoryType:"0"
        },
        {
            ChapterID:"3",
            ChapterWord:"003话",
            HistoryType:"1"
        },
        {
            ChapterID:"1",
            ChapterWord:"001话",
            HistoryType:"0"
        },
        {
            ChapterID:"2",
            ChapterWord:"002话",
            HistoryType:"0"
        },
        {
            ChapterID:"3",
            ChapterWord:"003话",
            HistoryType:"1"
        },
        {
            ChapterID:"1",
            ChapterWord:"001话",
            HistoryType:"0"
        },
        {
            ChapterID:"2",
            ChapterWord:"002话",
            HistoryType:"0"
        },
        {
            ChapterID:"3",
            ChapterWord:"003话",
            HistoryType:"1"
        },
        {
            ChapterID:"1",
            ChapterWord:"001话",
            HistoryType:"0"
        },
        {
            ChapterID:"2",
            ChapterWord:"002话",
            HistoryType:"0"
        },
        {
            ChapterID:"3",
            ChapterWord:"003话",
            HistoryType:"1"
        },
        {
            ChapterID:"1",
            ChapterWord:"001话",
            HistoryType:"0"
        },
        {
            ChapterID:"2",
            ChapterWord:"002话",
            HistoryType:"0"
        },
        {
            ChapterID:"3",
            ChapterWord:"003话",
            HistoryType:"1"
        },
        {
            ChapterID:"1",
            ChapterWord:"001话",
            HistoryType:"0"
        },
        {
            ChapterID:"2",
            ChapterWord:"002话",
            HistoryType:"0"
        },
        {
            ChapterID:"3",
            ChapterWord:"003话",
            HistoryType:"1"
        },
        ];
    },
    mounted(){
        var List=document.getElementsByClassName('el-button');
        for(var i=0;i<this.ChapterInfo.length;i++){
            console.log(this.ChapterInfo[i].HistoryType);
           if(this.ChapterInfo[i].HistoryType=="1"){
               List[i].classList.add('BackColorHui');
           }
        }
    }
}
</script>



<style scoped>
.BackColorHui{
    color: rgb(209, 209, 209);
}

#ComicDetailsBodyDIV{
  width: 800px;
  /* height: 2000px; */
  background-color: white;
  box-shadow: 0 1px 3px 0 rgba(106, 115, 133, 0.08);
  /* border: 1px solid red; */
  padding: 20px;
}

/* 章节表题 */
#titleWord{
    font-size: 24px;
    display: inline-block;
    /* border: 1px solid  black; */
}
/* 章节列表容器 */
#ChapterListDiv{
    /* border: 1px solid black; */
    margin-top: 25px;
    /* height: 500px; */
    
}
.ButtonOne{
    margin-left:10px ;
}
.ButtonNoOne{
    margin-top:12px ;
    margin-bottom:12px;
    margin-right:12px;  
}
/* 浏览过章节 */
#Seed{
    background-color: rgb(143, 143, 143);
}
</style>
<style>
 body {
  background-color: #fafafa;
}
*{
    margin: 0px;
    padding: 0px;
}
</style>